<section>
	<div class="rent-title ml-24 mr-24 line-height-45 font-wt font-16 border-b" style="color: #666;">
		租赁状况分析
	</div>
	<div class="rent-title ml-24 mr-24 mt-15 font-16 color-666 ">
		单元维度
	</div>
	<div class="clearfix pl-24 pr-24 pt-15 line-height-34" id="rentStatus0">
		<div class="pull-left">
			<div class="pull-left relative address-tab-hover">
				<div class="address-tab-span pull-left" style="text-indent: 15px;"></div>
				<span class="icon-spread pull-left line-height-34 pl-5"></span>
				<div class="rent-selected-nav">
					<ul class="inline">
						<li class="border-r active lin-hei-34">集团</li>
						<li class="border-r lin-hei-34">大区</li>
						<li class="lin-hei-34">公司</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="select-ul selected-rent icon-Gm-prefix pull-left">
			<span class="select-name info">请选择</span>
			<ul>
			</ul>
		</div>
		<div class="pull-left ml-16">
			<web-calendar v-model="date0" width="150" @change="selectD"></web-calendar>
		</div>
		<div class="pull-right dy-flex popoverBody" style="align-items: center;">
			<div class="rent-rate">
				<ul>
					<el-tooltip placement="top" content='可租面积-已租面积'>
						<li data-value="KZMJ" class="active border-r">空置面积</li>
					</el-tooltip>
					<el-tooltip placement="top" content='100% - 出租率'>
						<li data-value="KZL" class="border-r">空置率</li>
					</el-tooltip>
					<el-tooltip placement="top" content='已审核、执行中合同的单元面积（不包含停车场、工位、自用单元）'>
						<li data-value="CZMJ" class="border-r">已租面积</li>
					</el-tooltip>
					<el-tooltip placement="top" content='已租面积/出租面积 * 100%（已租面积为已审核、执行中合同的单元面积）'>
						<li data-value="CZL">出租率</li>
					</el-tooltip>
				</ul>
			</div>
		</div>
	</div>
	<div class="js-unit-no-data hide text-center ptb-75">暂无数据</div>
	<div class="js-unit-chart-container hide rent-container mt-15 pb-10 box-out-shadow" style="min-width:300px;height:500px;"></div>


	<div class="rent-title ml-24 mr-24 mt-15 font-16 color-666 popoverBody">
		工位维度
	</div>
	<div class="clearfix pl-24 pr-24 pt-15 line-height-34" id="rentStatus1">
		<div class="pull-left">

			<div class="pull-left relative address-tab-hover">
				<div class="address-tab-span1 pull-left" style="text-indent: 15px;"></div>
				<span class="icon-spread pull-left line-height-34 pl-5"></span>
				<div class="rent-selected-nav1">
					<ul class="inline">
						<li class="border-r active lin-hei-34">集团</li>
						<li class="border-r lin-hei-34">大区</li>
						<li class="lin-hei-34">公司</li>
					</ul>
				</div>

			</div>
		</div>
		<div class="select-ul selected-rent1 icon-Gm-prefix pull-left">
			<span class="select-name info">请选择</span>
			<ul>
			</ul>
		</div>
		<div class="pull-left ml-16">
			<web-calendar v-model="date1" width="150" @change="selectD"></web-calendar>
		</div>
		<div class="pull-right rent-rate1 " >
			<ul class="clearfix">
				<el-tooltip placement="top" content='可租个数 - 已租个数'>
					<li data-value="VWC" class="active border-r">空置个数</li>
				</el-tooltip>
				<el-tooltip placement="top" content='100% - 出租率'>
					<li data-value="VWP" class="border-r">空置率</li>
				</el-tooltip>
				<el-tooltip placement="top" content='已审核、执行中合同的单元个数（不包含自用）'>
					<li data-value="CWC" class="border-r">已租个数</li>
				</el-tooltip>
				<el-tooltip placement="top" content='已租工位/可租工位*100%（已租工位为已审核、执行中的工位的个数）'>
					<li data-value="CWP">出租率</li>
				</el-tooltip>
			</ul>
		</div>

	</div>
	<div class="js-wp-no-data hide text-center ptb-75">暂无数据</div>
	<div class="js-wp-chart-container hide rent-container1 mt-15 pb-10 box-out-shadow" style="min-width:300px;height:500px; "></div>

	<div class="rent-title ml-24 mr-24 mt-15 font-16 color-666 popoverBody">
		车位维度
	</div>
	<div class="clearfix pl-24 pr-24 pt-15 line-height-34" id="rentStatus2">
		<div class="pull-left">

			<div class="pull-left relative address-tab-hover">
				<div class="address-tab-span2 pull-left" style="text-indent: 15px;"></div>
				<span class="icon-spread pull-left line-height-34 pl-5"></span>
				<div class="rent-selected-nav2">
					<ul class="inline">
						<li class="border-r active lin-hei-34">集团</li>
						<li class="border-r lin-hei-34">大区</li>
						<li class="lin-hei-34">公司</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="select-ul selected-rent2 icon-Gm-prefix pull-left">
			<span class="select-name info">请选择</span>
			<ul>
			</ul>
		</div>
		<div class="pull-left ml-16">
			<web-calendar v-model="date2" width="150" @change="selectD"></web-calendar>
		</div>
		<div class="pull-right rent-rate2">
			<ul class="clearfix">
				<el-tooltip placement="top" content='可租个数 - 已租个数'>
					<li data-value="VSC" class="active border-r">空置个数</li>
				</el-tooltip>
				<el-tooltip placement="top" content='100% - 出租率'>
					<li data-value="VSP" class="border-r">空置率</li>
				</el-tooltip>
				<el-tooltip placement="top" content='已审核、执行中合同的单元个数（不包含自用）'>
					<li data-value="CSC" class="border-r">已租个数</li>
				</el-tooltip>
				<el-tooltip placement="top" content='已租车位/可租车位*100%（已租车位为已审核、执行中的车位的个数）'>
					<li data-value="CSP">出租率</li>
				</el-tooltip>
			</ul>
		</div>
	</div>
	<div class="js-st-no-data hide text-center ptb-75">暂无数据</div>
	<div class="js-st-chart-container rent-container2 mt-15 pb-10 box-out-shadow" style="min-width:300px;height:500px; "></div>
</section>
<script src="modules/report_ui/scripts/rentRank.js" charset="utf-8"></script>
<script src="modules/report_ui/scripts/rentRank1.js" charset="utf-8"></script>
<script src="modules/report_ui/scripts/rentRank2.js" charset="utf-8"></script>

<style type="text/css">
.box-out-shadow {
	box-shadow: 0 0 5px rgba(0,0,0,.3);
	border-radius: 4px;
	margin-left: 24px;
	margin-right: 24px;
	padding-top: 10px;
}
	.rent-selected-nav,
	.rent-selected-nav1,
	.rent-selected-nav2 {
		position: absolute;
		left: 0;
		top: 100%;
		width: 100%;
		z-index: 9999;
		background-color: #fff;
		display: none;
	}

	.rent-selected-nav,
	.rent-selected-nav1,
	.rent-selected-nav2 {
		height: auto;
	}

	.rent-selected-nav li {
		float: none;
	}

	.address-tab-hover {
		background-color: #ededed;
		width: 70px;
	}

	.address-tab-hover:hover .rent-selected-nav,
	.address-tab-hover:hover .rent-selected-nav1,
	.address-tab-hover:hover .rent-selected-nav2 {
		display: block;
	}

	.rent-selected-nav .active,
	.rent-selected-nav1 .active,
	.rent-selected-nav2 .active {
		background-color: #fff;
		color: #5e67a5;
	}
	.rent-rate, .rent-rate1, .rent-rate2 {
		height: 34px;
		border-radius: 4px;
	}
	.rent-rate li, .rent-rate1 li, .rent-rate2 li {
		line-height: 32px;
	}

	.selected-rent, .selected-rent1, .selected-rent2 {
	    margin-left: 0px;
	}
</style>
